<template>
	<div class="home-container" id="home_container">
		<div class="banner">
			<img class="banner-img" :src="BannerIcon" />
		</div>
		<a-row class="baoxiu-container" :gutter="[16, 16]">
			<!-- 报修信息列表 -->
			<a-col :span="16">
				<a-card v-if="!isShowDetail">
					<template #title>
						<div class="baoxiu-container-top">
							<a-select
								placeholder="请选择报修区域"
								v-model:value="param.area"
								:field-names="{ label: 'name', value: 'id' }"
								style="width: 200px"
                                @change="getPageData()"
                                allowClear
								:options="areas"
							></a-select>
							<a-select
								placeholder="请选择报修项目"
								v-model:value="param.type"
                                @change="getPageData()"
								:field-names="{ label: 'name', value: 'id' }"
								style="width: 200px; margin-left: 18px"
                                allowClear
								:options="types"
							></a-select>
						</div>
					</template>
					<template #extra>
						<a-input-search style="width: 300px; margin-left: 18px" @search="getPageData" v-model:value="param.keyword" placeholder="单号/报修人/内容" />
					</template>
					<div class="repair-items">
						<RepairItem class="repair-item" @showDetail="showDetail" v-for="(item, index) in repairItems" :rpitem="item" :key="index" />
					</div>
					<div class="pagination">
						<a-pagination
							:current="page.pagenumber"
							:page-size="page.pagesize"
							:total="allsize"
							@change="onPaginationChange"
							:show-total="(total) => `共 ${total}条`"
						/>
					</div>
				</a-card>
				<RepairDetail  v-else @goBack="goBack" :hide="true" :rep_wo_id="repWoId"/>
			</a-col>
			<a-col :span="8">
				<RepairOperation />
				<RepairTongji :tjdata = "tongjData" />
			</a-col>
		</a-row>
	</div> 
	<Fotter/>
</template>
<script setup>
	import { ref, onMounted, reactive } from 'vue'; 
	import tool from '@/utils/tool';
	import RepairItem from '@/views/open-info/components/repair-item.vue';
	import RepairDetail from '@/views/open-info/repair-detail.vue';
	import RepairTongji from '@/views/open-info/repair-tongji.vue';
	import RepairOperation from '@/views/open-info/components/repair-operation.vue';
	import BannerIcon from '@/assets/images/home/banner.png';
	import { RepairApi } from '@/api/repair-api';
	import Fotter from '@/layout/fotter/fotter.vue';
	
    // -------------------------报修公开列表---------------------------
	const repairItems = ref([]);
	const allsize = ref(0);
	const isShowDetail = ref(false);
	const repWoId = ref('');

	const page = reactive({
		pagenumber: 1,
		pagesize: 10,
	});
	const param = reactive({
		area: undefined,
		type: undefined,
        keyword:''
	});
	const areas = ref([]);
	const types = ref([]); 
	const getPageRef = async function(){
		tool.showLoading();
		const res = await RepairApi.getPageRef();
		tool.hideLoading();
		areas.value = res.查询条件中区域字典;
		types.value = res.查询条件中项目字典;
	}
	const getPageData = async function () {
		tool.showLoading();
		let reqParam = {
			...page,
			rep_wo_tj_qy_1_id: param.area,
			rep_wo_tj_lb_1_id: param.type,
			keyword: param.keyword,
		};
		const res = await RepairApi.getHomeRepairList(reqParam);
		tool.hideLoading();
		allsize.value = res.allsize; 
		repairItems.value = res.data;
        backTopTarget();
	};
    const onPaginationChange = function (pagenumber, pagesize) {
		page.pagenumber = pagenumber;
		page.pagesize = pagesize;
		getPageData();
	};
	
    //-----------------统计相关数据---------------------------
    const tongjData = ref({});
	const getTjData = async function () {
		tool.showLoading();
		const res = await RepairApi.getHomeTongjiData();
		tool.hideLoading();
		tongjData.value = res;
	};


	//----------------详情--------------------
	const showDetail = async function(rep_wo_id){
		repWoId.value = rep_wo_id;
		isShowDetail.value = true;
		backTopTarget();
	};
	const goBack = function(){
		isShowDetail.value = false;
	}

    //回到顶部
	const backTopTarget = () => {
		document.getElementById('smartAdminLayoutContent').scrollTop = 0;
	};
	onMounted(() => {
		getPageRef();
		getPageData();
		getTjData();
	});
</script>
<style lang="less">
	.home-container {
		width: 80%;
		min-width: 1200px;
		margin: 0 auto;
		.banner {
			margin: 8px auto;

			.banner-img {
				height: 256px;
				width: 100%;
				object-fit: cover;
				border-radius: 6px;
			}
		}

		.baoxiu-container {
			margin-bottom: 40px;
			.repair-item {
				padding: 8px;
			}
			.pagination {
				text-align: center;
			}
		}
	}
</style>
